import React, { useEffect, useState, useRef } from "react";
import { Col, Row, Card, Table, Avatar, Divider } from "antd";
import Style from "./index.module.scss";
import * as Icon from "@ant-design/icons";
import { request } from "../../api/axiosHttp";
import * as Echarts from "echarts";

const columns = [
  {
    title: "课程",
    dataIndex: "name",
  },
  {
    title: "今日购买",
    dataIndex: "todayBuy",
  },
  {
    title: "本月购买",
    dataIndex: "monthBuy",
  },
  {
    title: "总购买",
    dataIndex: "totalBuy",
  },
];
const countData = [
  {
    name: "今日支付订单",
    value: 1234,
    icon: "CheckCircleOutlined",
    color: "#2ec7c9",
  },
  {
    name: "今日收藏订单",
    value: 3421,
    icon: "ClockCircleOutlined",
    color: "#ffb980",
  },
  {
    name: "今日未支付订单",
    value: 1234,
    icon: "CloseCircleOutlined",
    color: "#5ab1ef",
  },
  {
    name: "本月支付订单",
    value: 3123,
    icon: "CheckCircleOutlined",
    color: "#2ec7c9",
  },
  {
    name: "本月支付订单",
    value: 5643,
    icon: "ClockCircleOutlined",
    color: "#ffb980",
  },
  {
    name: "本月支付订单",
    value: 7643,
    icon: "CloseCircleOutlined",
    color: "#5ab1ef",
  },
];

const Home = () => {
  const [data, setData] = useState([]);
  const getTableData = async () => {
    const res = await request("/home/getData");
    if (res.code === 200) {
      setData(res.data);
      createLineCharts(lineDom.current, res.data);
    }
  };
  const lineDom = useRef(null);
  const createLineCharts = (dom, currentData) => {
    let keys = Object.keys(currentData?.orderData?.data[0]);

    let seriesData = [];
    keys.forEach((key) => {
      seriesData.push({
        name: key,
        type: "line",
        data: currentData?.orderData?.data.map((item) => item[key]),
      });
    });

    let initChart = null;
    if (!initChart) {
      initChart = Echarts.init(dom);
      const option = {
        tooltip: {},
        xAxis: {
          type: "category",
          data: currentData?.orderData?.date,
        },
        yAxis: { type: "value" },
        series: seriesData,
      };
      initChart.setOption(option);
      window.addEventListener("resize", function () {
        initChart.resize();
      });
    }
  };
  useEffect(() => {
    getTableData();
  }, []);
  return (
    <Row
      gutter={{
        xs: 8,
        sm: 16,
        md: 24,
        lg: 32,
      }}
      className={Style.home}
    >
      <Col span={8}>
        <Card hoverable>
          <div className={Style.user}>
            <Avatar
              style={{
                backgroundColor: "#87d068",
                marginRight: "40px",
              }}
              size={180}
              icon={React.createElement(Icon["UserOutlined"])}
            />
            <div className={Style.userinfo}>
              <p className={Style.name}>Admin</p>
              <p className={Style.access}>超级管理员</p>
            </div>
          </div>
          <Divider />
          <div className={Style.loginInfo}>
            <p>
              上次登陆时间：<span>2024:09:17</span>
            </p>
            <p>
              上次登陆地点：<span>陕西</span>
            </p>
          </div>
        </Card>
        <Card
          style={{
            marginTop: "20px",
          }}
        >
          <Table
            rowKey="name"
            pagination={false}
            columns={columns}
            dataSource={data.tableData}
          />
        </Card>
      </Col>
      <Col span={16}>
        <div className={Style.num}>
          {countData.map((item, index) => {
            return (
              <Card key={index}>
                <div
                  className={Style.iconBox}
                  style={{
                    background: item.color,
                  }}
                >
                  {React.createElement(Icon[item.icon])}
                </div>
                <div className={Style.detail}>
                  <p className={Style.count}>￥{item.value}</p>
                  <p className={Style.txt}>{item.name}</p>
                </div>
              </Card>
            );
          })}
        </div>
        <div style={{ height: "400px" }} ref={lineDom}></div>
      </Col>
    </Row>
  );
};
export default Home;
